<template>
  <el-card class="home">
    <!-- <div slot="header" class="solt">后台首页</div> -->
    <!-- 卡片 -->
    <div class="card-list df jcsb">
      <card-vue :item="item" v-for="item in cardData" :key="item.title"></card-vue>
    </div>
  </el-card>
</template>

<script>
//首页报表接口
import { homeTotalDataReq } from "@/api/home";
// 引入组件
import cardVue from "./card.vue";

export default {
  data() {
    return {
      cardData: [],
    };
  },
  components: {
    cardVue,
  },
  methods: {
    async getData() {
      let res = await homeTotalDataReq({});
      //   解构数据
      let {
        xData,
        orderData,
        amountData,
        totalOrder,
        totalAmount,
        todayOrder,
        totayAmount,
      } = res.data;
      // 处理数据
      let temp = [
        {
          title: "总订单",
          count: totalOrder,
          imgUrl: require("@/assets/imgs/123.png"),
        },
        {
          title: "总销售额",
          count: totalAmount,
          imgUrl: require("@/assets/imgs/123.png"),
        },
        {
          title: "今日订单数",
          count: todayOrder,
          imgUrl: require("@/assets/imgs/123.png"),
        },
        {
          title: "今日销售额",
          count: totayAmount,
          imgUrl: require("@/assets/imgs/123.png"),
        },
      ];
      //   数据赋值
      this.cardData = temp;
    },
  },
  // 初始化发请求
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.home{
    height: 100%;
    background-color: rgb(210, 209, 209);
}

.card-list{
    margin-top: 10px;
}
</style>